<template>
  <div>
    <!-- 最上面搜索和登录部分 -->
    <van-row>
      <van-col class="logo">
        <img src="../assets/login.png" alt="" />
      </van-col>
      <van-col>
        <van-search
          class="search_input"
          v-model="search_v"
          placeholder="请输入搜索关键词"
        />
      </van-col>
      <van-col>
        <van-button class="login_button" color="#e55359" plain size="small"
          >登录</van-button
        >
      </van-col>
    </van-row>

    <!-- Tab标签页 -->
    <van-tabs>
      <van-tab v-for="(item, index) in tabList" :title="item" :key="index">
      </van-tab>
    </van-tabs>

    <!-- 轮播图 -->
    <van-swipe :autoplay="1000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in tabUrl" :key="index">
        <img :src="item" alt="" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 滚动条下的广告 -->
    <van-row class="advertisement">
      <van-col span="8">
        <i class="icon icon_1"></i>
        <span>网易自营品牌</span>
      </van-col>
      <van-col span="8">
        <i class="icon icon_2"></i>
        <span>30天无忧退货</span>
      </van-col>
      <van-col span="8"
        ><i class="icon icon_3"></i> <span>48小时快速退款</span></van-col
      >
    </van-row>

    <!-- 九宫格展示图片 5排10个 -->
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="(item, index) in nineImg" :key="index">
        <img :src="item.url" style="width:100%" alt="" />
        <div>
          <span style="font-size: 0.1rem">{{ item.goods_txt }}</span>
        </div>
      </van-grid-item>
    </van-grid>

    <!-- 商品列表 -->
    <div class="goods_list">
      <h1>
        <span>新品首发</span>
        <a href="#">更多></a>
      </h1>
    </div>

    <!-- 新品首发列表 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="(item, index) in goodsList" :key="index">
        <div>
          <img :src="item.url" style="width: 100%" alt="" />
        </div>
        <div>
          <span style="font-size: 0.1rem">{{ item.txt }}</span>
        </div>
        <div>
          <span>￥{{ item.price }}</span>
        </div>
      </van-grid-item>
    </van-grid>

    <!-- 最底部的标签栏 吸底-->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="birthday-cake-o">分类</van-tabbar-item>
      <van-tabbar-item icon="photo-o" dot>值得买</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" dot>个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search_v: "",
      tabList: [
        "推荐",
        "居家生活",
        "服饰鞋包",
        "美食酒水",
        "个护清洁",
        "母婴亲子",
        "全球特色"
      ],
      tabUrl: [
        "https://yanxuan.nosdn.127.net/8791af5b802edd4a26ac79146cff50cc.png?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/194d6e3c4112c7d71df4bdec7670f490.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/472b0d1eafd60edab1c811a80ba42d92.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/7a33ec04aadabc59e5e2875e59c310fd.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
      ],
      nineImg: [
        {
          url: require("../assets/goods_icon/9img1.png"),
          goods_txt: "新品首发"
        },
        {
          url: require("../assets/goods_icon/9img2.png"),
          goods_txt: "居家生活"
        },
        {
          url: require("../assets/goods_icon/9img3.png"),
          goods_txt: "服饰鞋包"
        },
        {
          url: require("../assets/goods_icon/9img4.png"),
          goods_txt: "美食洒水"
        },
        {
          url: require("../assets/goods_icon/9img5.png"),
          goods_txt: "个护清洁"
        },
        {
          url: require("../assets/goods_icon/9img6.png"),
          goods_txt: "母婴亲子"
        },
        {
          url: require("../assets/goods_icon/9img7.png"),
          goods_txt: "运动旅行"
        },
        {
          url: require("../assets/goods_icon/9img8.png"),
          goods_txt: "数码家电"
        },
        {
          url: require("../assets/goods_icon/9img9.png"),
          goods_txt: "全球特色"
        },
        {
          url: require("../assets/goods_icon/9img10.gif"),
          goods_txt: "好货抄底"
        }
      ],
      //最底部标签栏被选中标签
      active: "",
      //新品首发列表图片
      goodsList: [
        {
          url:
            "https://yanxuan-item.nosdn.127.net/f7578d82fe7ccfe286aa1b5f4d31b8e5.png?type=webp&imageView&quality=65&thumbnail=330x330",
          txt: "和手足干裂说拜拜 手足皲裂修复愈裂霜",
          price: 35,
          gradientPrice: ""
        },
        {
          url:
            "https://yanxuan-item.nosdn.127.net/6c309cfff391b9512571e11f9b78cf44.jpg?type=webp&imageView&quality=65&thumbnail=330x330",
          txt: "暖手亲肤，反向充电，云感暖手宝",
          price: 99,
          gradientPrice: 0
        },
        {
          url:
            "https://yanxuan-item.nosdn.127.net/8ad6f2117841e8e96649c8b2113cd407.png?type=webp&imageView&quality=65&thumbnail=330x330",
          txt: "吃着零食养着生，蜂蜜黑芝麻条 200克*2盒",
          price: 49,
          gradientPrice: 0
        },
        {
          url:
            "https://yanxuan-item.nosdn.127.net/5bd19dfae69ccaaf0dc86437cb1c9eb9.png?type=webp&imageView&quality=65&thumbnail=330x330",
          txt: "中点西作，蛋糕沙琪玛 麻辣牛肉 210克",
          price: 22,
          gradientPrice: 0
        },
        {
          url:
            "https://yanxuan-item.nosdn.127.net/a402745567e624e54175145344ce962e.png?type=webp&imageView&quality=65&thumbnail=330x330",
          txt: "地道家乡味，面面俱到 4口味组合装",
          price: 42.8,
          gradientPrice: 0
        },
        {
          url:
            "https://yanxuan-item.nosdn.127.net/412c588f98bc9fc77aef0b1f32f45732.png?type=webp&imageView&quality=65&thumbnail=330x330",
          txt: "卓越自护力，爱他美卓萃婴幼儿奶粉 1-4段",
          price: 375,
          gradientPrice: 0
        }
      ]
    };
  }
};
</script>

<style style="less" scoped>
.logo img {
  width: 0.8rem;
  display: inline-block;
  margin: 0.15rem 0 0 0.1rem;
}
.search_input {
  width: 2.3rem;
}
.van-search__content {
  border-radius: 0.12rem;
  background-color: #ededed;
}
.login_button {
  border-radius: 0.03rem;
  margin-top: 0.11rem;
}
.advertisement {
  font-size: 0.1rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  font-weight: 200;
}
.advertisement .icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 0.2rem;
  width: 0.2rem;
  margin-right: 0.02rem;
  vertical-align: middle;
}
.advertisement .icon_1 {
  background-image: url("../assets/adv1.png");
}
.advertisement .icon_2 {
  background-image: url("../assets/adv2.png");
}
.advertisement .icon_3 {
  background-image: url("../assets/adv3.png");
}
.goods_list h1 {
  height: 0.4rem;
  line-height: 0.4rem;
}
.goods_list h1 span {
  font-size: 0.16rem;
  margin-left: 0.1rem;
}
.goods_list h1 a {
  float: right;
  font-size: 0.15rem;
  color: black;
  margin-right: 0.1rem;
}
</style>
